<template>
		<u-sticky bgColor="#fff" style="border: 1px solid #e5e5e5;">
		    <!-- <u-tabs class="myTabs" :list="tabsList" @change="tabChange" @click="setCount" lineWidth="30"></u-tabs> -->
			<view style="height: 44px;display: flex;">
				<view @click="setColor(0)" :class="{ active: 0 == color1 }" style="border-bottom: 1px solid #e5e5e5;width: 50%;display: flex;justify-content: center;align-items: center;color: #007aff;" >领导交代</view>
				<view @click="setColor(1)" :class="{ active: 1 == color1 }" style="border-bottom: 1px solid #e5e5e5;width: 50%;display: flex;justify-content: center;align-items: center;color: #007aff;" >下属任务</view>
			</view>
		 </u-sticky>
	<view >
		<leader v-if="count==0" ref="leaderRef"></leader>
		<underling v-if="count==1"  ref="underlingRef"></underling>
	</view>
	
</template>

<script>
	import {
		onReachBottom,
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import leader from "./components/leader.vue";
	import underling from "./components/underling.vue";
    export default {
		components: {
			leader,
			underling
		},

        data() {
            return {
				count: 0,
                tabsList: [{
                    name: '领导交代',
                }, {
                    name: '下属任务',
                }],
				color1:0,
            }
        },
		onReachBottom() {
			console.log("---------------------------",this.count);
			if(this.count == 0){
				this.$refs.leaderRef.scroll()
			}else if(this.count == 1){
				this.$refs.underlingRef.scroll()
			}
		},
		methods: {
		  tabChange(index) {
		    console.log('当前选中的选项卡索引：', index.index);
		  },
		  setCount(index) {
		    this.count = index.index
		  },
		  setColor(i){
			  this.count = i
			  this.color1 = i
		  }
		}
    }
</script>
<style>
	.active{
		background-color: #007aff;
		color: #fff !important;
	}
</style>